<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_超链接</title>
</head>
<body>
    <a href="http://www.baidu.com"><img src="xfs.jpg"></a>

    <h1>西游记</h1>
    <a href="#c1">1</a>
    <a href="#c2">2</a>
    <a href="#c3">3</a>
    <h3 id="c1">我是石猴</h3>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium cupiditate debitis distinctio doloremque doloribus in incidunt molestiae necessitatibus officia quis. Ab dolorem, id iste labore laudantium nostrum repellat unde veniam!</span><span>A ab adipisci autem doloribus ducimus fugit harum in magni maxime modi numquam porro, provident similique temporibus, veritatis! Asperiores beatae ea, explicabo facere iste nostrum quam quidem quisquam reiciendis sunt.</span><span>Doloremque, eaque est maiores minima modi nobis quidem quisquam recusandae rerum saepe sequi sit tempora unde ut velit veniam veritatis voluptatem. Itaque omnis quia saepe. Aperiam autem dolor eligendi laudantium?</span><span>Adipisci facilis harum impedit ipsum tempore. Accusantium consequuntur cumque dolore est omnis. Amet cumque nam non praesentium quis? Alias dolor eaque eos et expedita natus neque nisi omnis pariatur similique.</span><span>Consequuntur cupiditate ducimus, ea expedita explicabo id incidunt maiores, mollitia nisi nostrum omnis, rerum voluptatibus voluptatum? Aliquid assumenda nostrum officiis placeat quo? Eum laudantium nemo numquam omnis quaerat quis rerum.</span><span>Animi aspernatur beatae deserunt dolorum eveniet, excepturi, fugiat harum illo illum inventore ipsam laboriosam molestiae mollitia optio perspiciatis quisquam sed sit veniam. Architecto distinctio eos reprehenderit sit. Distinctio, nesciunt veritatis!</span><span>Corporis, cumque, reiciendis. Adipisci, aliquid consectetur consequuntur eius enim ex exercitationem fugiat hic in incidunt magni natus nobis non odio officia pariatur praesentium quae quasi quia quibusdam sed tempora voluptas!</span><span>Asperiores atque blanditiis dolor dolorum ducimus, ea eos eveniet exercitationem expedita, inventore iusto laboriosam magni maiores nemo nesciunt officiis placeat quam quas quisquam repellendus reprehenderit sed sunt veniam vitae voluptatum.</span><span>Accusantium aliquid amet, beatae ea nemo perferendis quo repudiandae voluptatum? Iusto minima nulla reiciendis ut. Corporis ea incidunt similique! At culpa dicta doloribus id illum ipsa, laborum optio quo voluptatem?</span><span>Cupiditate delectus, doloremque ipsa itaque molestiae porro praesentium provident qui quia quidem sequi soluta unde. Ab accusamus atque facere illum, iste itaque iusto minus natus quis repellat sequi tempore totam.</span></p>

    <h3 id="c2">真假美猴王</h3>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium cupiditate debitis distinctio doloremque doloribus in incidunt molestiae necessitatibus officia quis. Ab dolorem, id iste labore laudantium nostrum repellat unde veniam!</span><span>A ab adipisci autem doloribus ducimus fugit harum in magni maxime modi numquam porro, provident similique temporibus, veritatis! Asperiores beatae ea, explicabo facere iste nostrum quam quidem quisquam reiciendis sunt.</span><span>Doloremque, eaque est maiores minima modi nobis quidem quisquam recusandae rerum saepe sequi sit tempora unde ut velit veniam veritatis voluptatem. Itaque omnis quia saepe. Aperiam autem dolor eligendi laudantium?</span><span>Adipisci facilis harum impedit ipsum tempore. Accusantium consequuntur cumque dolore est omnis. Amet cumque nam non praesentium quis? Alias dolor eaque eos et expedita natus neque nisi omnis pariatur similique.</span><span>Consequuntur cupiditate ducimus, ea expedita explicabo id incidunt maiores, mollitia nisi nostrum omnis, rerum voluptatibus voluptatum? Aliquid assumenda nostrum officiis placeat quo? Eum laudantium nemo numquam omnis quaerat quis rerum.</span><span>Animi aspernatur beatae deserunt dolorum eveniet, excepturi, fugiat harum illo illum inventore ipsam laboriosam molestiae mollitia optio perspiciatis quisquam sed sit veniam. Architecto distinctio eos reprehenderit sit. Distinctio, nesciunt veritatis!</span><span>Corporis, cumque, reiciendis. Adipisci, aliquid consectetur consequuntur eius enim ex exercitationem fugiat hic in incidunt magni natus nobis non odio officia pariatur praesentium quae quasi quia quibusdam sed tempora voluptas!</span><span>Asperiores atque blanditiis dolor dolorum ducimus, ea eos eveniet exercitationem expedita, inventore iusto laboriosam magni maiores nemo nesciunt officiis placeat quam quas quisquam repellendus reprehenderit sed sunt veniam vitae voluptatum.</span><span>Accusantium aliquid amet, beatae ea nemo perferendis quo repudiandae voluptatum? Iusto minima nulla reiciendis ut. Corporis ea incidunt similique! At culpa dicta doloribus id illum ipsa, laborum optio quo voluptatem?</span><span>Cupiditate delectus, doloremque ipsa itaque molestiae porro praesentium provident qui quia quidem sequi soluta unde. Ab accusamus atque facere illum, iste itaque iusto minus natus quis repellat sequi tempore totam.</span></p>
    <h3 id="c3">大闹天宫</h3>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium cupiditate debitis distinctio doloremque doloribus in incidunt molestiae necessitatibus officia quis. Ab dolorem, id iste labore laudantium nostrum repellat unde veniam!</span><span>A ab adipisci autem doloribus ducimus fugit harum in magni maxime modi numquam porro, provident similique temporibus, veritatis! Asperiores beatae ea, explicabo facere iste nostrum quam quidem quisquam reiciendis sunt.</span><span>Doloremque, eaque est maiores minima modi nobis quidem quisquam recusandae rerum saepe sequi sit tempora unde ut velit veniam veritatis voluptatem. Itaque omnis quia saepe. Aperiam autem dolor eligendi laudantium?</span><span>Adipisci facilis harum impedit ipsum tempore. Accusantium consequuntur cumque dolore est omnis. Amet cumque nam non praesentium quis? Alias dolor eaque eos et expedita natus neque nisi omnis pariatur similique.</span><span>Consequuntur cupiditate ducimus, ea expedita explicabo id incidunt maiores, mollitia nisi nostrum omnis, rerum voluptatibus voluptatum? Aliquid assumenda nostrum officiis placeat quo? Eum laudantium nemo numquam omnis quaerat quis rerum.</span><span>Animi aspernatur beatae deserunt dolorum eveniet, excepturi, fugiat harum illo illum inventore ipsam laboriosam molestiae mollitia optio perspiciatis quisquam sed sit veniam. Architecto distinctio eos reprehenderit sit. Distinctio, nesciunt veritatis!</span><span>Corporis, cumque, reiciendis. Adipisci, aliquid consectetur consequuntur eius enim ex exercitationem fugiat hic in incidunt magni natus nobis non odio officia pariatur praesentium quae quasi quia quibusdam sed tempora voluptas!</span><span>Asperiores atque blanditiis dolor dolorum ducimus, ea eos eveniet exercitationem expedita, inventore iusto laboriosam magni maiores nemo nesciunt officiis placeat quam quas quisquam repellendus reprehenderit sed sunt veniam vitae voluptatum.</span><span>Accusantium aliquid amet, beatae ea nemo perferendis quo repudiandae voluptatum? Iusto minima nulla reiciendis ut. Corporis ea incidunt similique! At culpa dicta doloribus id illum ipsa, laborum optio quo voluptatem?</span><span>Cupiditate delectus, doloremque ipsa itaque molestiae porro praesentium provident qui quia quidem sequi soluta unde. Ab accusamus atque facere illum, iste itaque iusto minus natus quis repellat sequi tempore totam.</span></p>

</body>
</html>